<script setup lang="ts">
import { ref } from 'vue'
// 引入常量
import type { ENUM_OPERATION_TYPE } from '@/utils/constant'
// 查询条件
import params from './params.vue'
import type { ReqAdminQueryParams } from '@/api/admin/admin'

// 表格
import { columns } from './columns'
import { queryApi, delApi } from '@/api/admin/admin'
import baseTable from '@/components/mytable/baseTable.vue'

// 新增、修改页面
// 详情页面
// import { SyncOutlined } from '@ant-design/icons-vue'

// 多语言
const { t } = useI18nLocale()
const notification = useNotification()

// 获取子组件实例
// const paramsRef = ref<any>()
  // const paramsRef = ref(null);
  const paramsRef = ref<InstanceType<typeof params> | null>(null);
// 加载表格数据
const loading = ref(false)
// 在父组件中，通过 ref 获取 base-table 的实例
const myTableRef = ref<any>()
const dataSource = ref<any>([])
// 保存/修改后刷新表格
const modifyEntity = ref<any>({
  // 传递的主键
  id: '',
  // 页面操作类型
  operation: '',
  // 是否展示编辑页面
  showModify: false,
  // 是否展示详情页面
  showDetail: false,
})
onMounted(() => {
  console.log('父组件挂载后，子组件实例:', paramsRef.value);
  console.log('子组件的 queryParams:', paramsRef.value?.queryParams);
});
watchEffect(() => {
  if (paramsRef.value) {
    console.log(paramsRef.value.queryParams);
  }
});
async function loadData() {
  loading.value = true
  const queryParam: ReqAdminQueryParams = {
    pageNo: myTableRef.value._pagination.current,
    pageSize: myTableRef.value._pagination.pageSize,
    ...paramsRef.value.queryParams,
  }
console.log(paramsRef.value)
  try {
    const { code, data, msg } = await queryApi(queryParam)
    if (code === 200) {
      dataSource.value = data.data
      myTableRef.value._pagination.total = data.total
      myTableRef.value._selectedRowKeys = []
      myTableRef.value._selectedRows = []
    } else {
      notification.warning({
        message: msg,
        duration: 5,
      })
    }
    loading.value = false
  } catch (e) {
    loading.value = false
  }
}

// 刷新
async function handleRefresh() {
  modifyEntity.value.showDetail = false
  modifyEntity.value.showModify = false
  myTableRef.value._pagination.current = 1
  await loadData()
}

// 打开添加页面
function handleAdd() {
  modifyEntity.value.showModify = true
  modifyEntity.value.showDetail = false
  modifyEntity.value.operation = ENUM_OPERATION_TYPE.ADD
}

// 打开编辑页面
function handleUpdate(item: any) {
  modifyEntity.value.id = item.id
  modifyEntity.value.showModify = true
  modifyEntity.value.showDetail = false
  modifyEntity.value.operation = ENUM_OPERATION_TYPE.EDIT
}

// 打开详情页面
function handleDetail(item: any) {
  modifyEntity.value.id = item.id
  modifyEntity.value.showModify = false
  modifyEntity.value.showDetail = true
  modifyEntity.value.operation = ENUM_OPERATION_TYPE.DETAILS
}

// 删除
async function handleDeleteSubmit(ids: string) {
  try {
    loading.value = true
    const { code, msg } = await delApi(ids)
    if (code === 200) {
      notification.success({
        message: msg,
        duration: 5,
      })
      handleRefresh()
    } else {
      notification.warning({
        message: msg,
        duration: 5,
      })
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}

// 导入数据
function handleImport() {}
// 导出数据
function handleExport() {}

onMounted(() => {
  console.log('1组件挂载1');
});

onMounted(() => {
  console.log('1组件挂载2');
});

onUnmounted(() => {
  console.log('1组件卸载');
});

onUpdated(() => {
  console.log('1组件更新');
});

onBeforeUpdate(() => {
  console.log('1组件将要更新');
});

onActivated(() => {
  console.log('1keepAlive 组件 激活');
});

onDeactivated(() => {
  console.log('1keepAlive 组件 非激活');
});
</script>

<template>
  <page-container>
    <!-- 查询表单 -->
    <params ref="paramsRef" :loading="loading" @handle-refresh="handleRefresh" />
    <!-- 表格 -->
    <base-table
      ref="myTableRef"
      :dataSource="dataSource"
      :columns="columns"
      title="管理员设定"
      :scroll="{ y: 400 }"
      :loading="loading"
      @loadData="loadData"
      @handleAdd="handleAdd"
      @handleDeleteSubmit="handleDeleteSubmit"
      @handleUpdate="handleUpdate"
      @handleDetail="handleDetail"
      @handleImport="handleImport"
      @handleExport="handleExport"
      @handleRefresh="handleRefresh"
    >
      <!-- 自定义插槽内容 -->
      <!-- <template #expandedRowRender>
        <a-space>
          <a-button type="primary">新增用户</a-button>
          <a-button type="dashed">刷新</a-button>
        </a-space>
      </template> -->
      <template #logo="{ text }">
        <img :src="text" alt="Logo" />
      </template>

      <template #status="{ text }">
        <span>{{ text }}</span>
      </template>
    </base-table>
  </page-container>
</template>

<!-- addAction="citySetting_create"
        deleteAction="citySetting_delete"
        editAction="citySetting_edit"
        detailAction="citySetting_details"
        importAction="citySetting_import"
        exportAction="citySetting_export" -->
<!-- 表格 -->

<!-- <template #sequence="{ index }">
        {{ (_pagination.current - 1) * _pagination.pageSize + index + 1 }}
      </template> -->

<!-- 新增、修改 -->
<!-- <modify
      v-if="modifyEntity.showModify"
      @handleRefresh="handleRefresh"
      :modifyEntity="modifyEntity"
    /> -->
<!-- <detail
      v-if="modifyEntity.showDetail"
      @handleRefresh="handleRefresh"
      :modifyEntity="modifyEntity"
    /> -->
